<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>欢迎使用内容管理系统</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    {include file="public/baseCss"}
    <script src="/static/echarts.min.js"></script>
    <script src="/static/global/js/jquery.min.js"></script>
</head>
<body>
<style>
    .ht-main a {
        color: #555555;
        text-decoration: none;
    }
    .ht-main{
        overflow-x: hidden;
    }
    .chart {
        background-color: #ffff;
    }
    .echart{
        background-color: #FFFFFF;
        padding: 10px;
    }
    #test1{
        width: 100%;
        height: 300px;

    }
    #test2{
        width: 100%;
        height: 300px;
    }

</style>
<div id="app">

    <div class="ht-main" style="background-color: #eee;padding: 1px;display: none">
        <el-row :gutter="10">
            <el-col :span="12"><div class="echart"><div id="test1"></div></div></el-col>
            <el-col :span="12"><div class="echart"><div id="test2"></div></div></el-col>
        </el-row>

        <div style="margin-top: 10px;background-color: #FFFFFF;padding: 10px">
            <div class="chart" style="width: 100%;height: 300px;" id="test3"></div>
        </div>
    </div>

    <div>
        <el-descriptions title="版本信息"></el-descriptions>
        <template>
            <el-table :data="tableData">
                <el-table-column
                        prop="title"
                        label="标题"
                        width="100">
                </el-table-column>
                <el-table-column
                        prop="con"
                        label="内容">
                    <template slot-scope="scope">
                        <span v-html='scope.row.con'></span>
                    </template>
                </el-table-column>
            </el-table>
        </template>
    </div>


</div>
<script>
    new Vue({
        el: "#app",
        data: function () {
            return {
                tableData: [{
                    "title": "基于框架",
                    "con": "ThinkPHP"
                }, {
                    "title": "当前域名",
                    "con": "{$php.2}"
                }, {
                    "title": "运行方式",
                    "con": "{$php.3}"
                }, {
                    "title": "PHP版本",
                    "con": "{$php.1}"
                }, {
                    "title": "操作系统",
                    "con": "{$php.0}"
                }, {
                    "title": "当前版本",
                    "con": "{$ver}"
                }, {
                    "title": "上传限制",
                    "con": "{$php.4}"
                }, {
                    "title": "协议版本",
                    "con": "{$php.5}"
                }]
            }
        },
        methods: {}
    })
</script>
<script>
    // 基于准备好的dom，初始化echarts实例
    var myChart1 = echarts.init(document.getElementById('test1'));
    var myChart2 = echarts.init(document.getElementById('test2'));
    var myChart3 = echarts.init(document.getElementById('test3'));
</script>

<script>
    $.post('/admin/index/echart',function (res){
        console.log(res.data)
        let c = res.data.consumer;
        let a = res.data.agent;
        let s = res.data.shop
        // 指定图表的配置项和数据
        var option1 = {
            title: {
                text: '经销店成交量TOP5'
            },
            tooltip: {},
            legend: {
                orient: 'vertical',
                data: s.legend,
                left: 'right'
            },
            xAxis: {
                data: s.xAxis
            },
            yAxis: {},
            series: s.series
        };
        myChart1.setOption(option1);
        // 饼图
        var option2 = {
            title: {
                text: '意向用户',
            },
            tooltip: {
                trigger: 'item'
            },
            legend: {
                orient: 'vertical',
                left: 'right'
            },
            series: [
                {
                    name: '意向用户',
                    type: 'pie',
                    radius: '50%',
                    data: [
                        { value: c.status_1, name: '未处理' },
                        { value: c.status_200, name: '有效' },
                        { value: c.status_400, name: '无效' },
                        { value: c.status_300, name: '成交' },
                    ],
                    emphasis: {
                        itemStyle: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    }
                },
            ]
        };
        myChart2.setOption(option2);
        // 经纪人
        var option3 = {
            title: {
                text: '经纪人TOP10'
            },
            tooltip: {},
            legend: {
                orient: 'vertical',
                data: a.legend,
                left: 'right'
            },
            xAxis: {
                data: a.xAxis
            },
            yAxis: {},
            series: a.series
        };
        myChart3.setOption(option3);
    })

</script>
</body>
</html>

